<template>
  <el-card class="container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      :disabled="!category3Id"
      @click="showSaveSpu"
    >
      添加SPU
    </el-button>

    <el-table v-loading="loading" :data="spuList" border class="table">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column prop="spuName" label="spu名称" />
      <el-table-column label="spu描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-tooltip effect="dark" content="添加SKU" placement="top">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="showSaveSku(row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="修改SPU" placement="top">
            <el-button
              type="warning"
              icon="el-icon-edit"
              size="mini"
              @click="showUpdateSpu(row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="查看SKU列表" placement="top">
            <el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="showSkuList(row)"
            />
          </el-tooltip>
          <el-tooltip effect="dark" content="删除SPU" placement="top">
            <el-button type="danger" icon="el-icon-delete" size="mini" />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog :title="`${spu.spuName}的sku列表`" :visible.sync="dialogVisible">
      <el-table v-loading="skuListLoading" :data="skuList" border class="table">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
          fixed
        />
        <el-table-column prop="skuName" label="sku名称" width="200" />
        <el-table-column prop="skuDesc" label="sku描述" width="200" />
        <el-table-column prop="price" label="sku价格" width="100" />
        <el-table-column prop="weight" label="sku重量" width="100" />
        <el-table-column label="sku图片" width="200" align="center">
          <template v-slot="{ row }">
            <img
              class="spu-list-img"
              :src="row.skuDefaultImg"
              :alt="row.skuName"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
// import { reqGetSpuList } from '@/api/product/spu'

export default {
  name: 'SpuList',
  data() {
    return {
      loading: false,
      spuList: [],
      currentPage: 1,
      pageSize: 3,
      total: 0,
      dialogVisible: false,
      spu: {
        spuName: ''
      },
      skuList: [],
      skuListLoading: false
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    category3Id: {
      handler(category3Id) {
        if (!category3Id) {
          this.spuList = []
          this.total = 0
          this.currentPage = 1
          this.pageSize = 3
          return
        }

        this.getSpuList()
      },
      immediate: true
    }
  },
  methods: {
    async showSkuList(spu) {
      this.dialogVisible = true
      this.spu.spuName = spu.spuName
      this.skuListLoading = true
      this.skuList = []
      // 发送请求，请求数据
      const { data } = await this.$API.sku.reqFindSkuListBySpuId(spu.id)
      this.skuList = data
      this.skuListLoading = false
      this.$message({
        type: 'success',
        message: '获取SKU列表成功'
      })
    },
    showSaveSku(row) {
      this.$emit('setIsShow', 3)
      // 只用上两个数据
      this.$emit('setSpu', {
        id: row.id,
        spuName: row.spuName
      })
    },
    showSaveSpu() {
      this.$emit('setIsShow', 2)
      this.$emit('setSpu', {})
    },
    showUpdateSpu(row) {
      this.$emit('setIsShow', 2)
      this.$emit('setSpu', {
        ...row,
        // 为了防止在SaveSpu页面报错
        spuImageList: [],
        spuSaleAttrList: []
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSpuList()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSpuList()
    },
    async getSpuList() {
      this.loading = true
      const { currentPage, pageSize, category3Id } = this
      const { data } = await this.$API.spu.reqGetSpuList({
        page: currentPage,
        limit: pageSize,
        category3Id
      })
      this.spuList = data.records
      this.total = data.total
      this.loading = false
      this.$message({
        type: 'success',
        message: '获取SPU列表成功'
      })
    }
  }
}
</script>

<style lang="sass" scoped>
.table
  margin: 10px 0
.spu-list-img
  width: 150px
  height: 100px
</style>
